<template>
    <div class="header">
        <div v-for="(item, index) in fileList" :key="index">
            <div class="uploadBtn">
                <span>
                    <i class="el-icon-document" style="padding: 0 10px"></i>
                    <span class="fileName" @click="downLoadFileBtn(item)">{{ item.name }}</span>
                </span>
                <el-popconfirm popper-class="popclass" title="是否确定删除该附件？" @confirm="confirmDelFile(item)">
                    <el-button :disabled="type === 'look'" class="refernce" slot="reference" icon="el-icon-circle-close" size="mini"></el-button>
                </el-popconfirm>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
    name: 'UploadFileShow',
    components: {},
})
export default class UploadFileShow extends Vue {
    @Prop() fileList;
    @Prop() type: string;
    downLoadFileBtn(param) {
        this.$emit('emitDownLoadFile', param);
    }
    confirmDelFile(param) {
        this.$emit('emitConfirmDelFile', param);
    }
}
</script>
<style lang="scss" scoped>
// .uploadBtn:hover {
//     background: #f5f7fa;
// }
.fileName {
    color: #ba926f;
    text-decoration: none;
    cursor: pointer;
}
.refernce {
    border: none;
    background: rgba(255, 255, 255, 0);
    padding: 5px;

    i {
        font-size: 12px;
    }
}

.uploadBtn {
    i,
    span {
        font-size: 12px;
    }
    .el-icon-document {
        padding: 0 5px;
    }
}
</style>
<style lang="scss">
.popclass {
    // color: red;
    // .el-popconfirm {
    //     padding: 10px;
    // }
    .el-popconfirm__action {
        padding: 10px;
    }
}
</style>
